<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css" />
    <script src="../../yl.app.js" ></script>
    <script src="../../../res/components/vue.min.js" ></script>
    <script src="../../../res/components/jquery-2.2.4.min.js" ></script>
    <script src="../../../res/components/jquery.nicescroll.min.js" ></script>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            background: linear-gradient(to left top,#4CAF50, #2196F3);
        }
        .clear{
            clear: both;}
        #app{
            width:80%;
            max-width: 720px;
            height:80%;
            position: absolute;
            top:50%;
            left:50%;
            border-radius: 5px;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            transform:translate(-50%,-50%);
        }
        #url-box,#btn-go{
            color: white;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            float: left;
            transition: all 0.3s;
            box-sizing: border-box;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.54);
        }
        #url-box{
            width: 60%;
            outline: none;
            border-radius: 8px 0 0 8px;
            margin-left: calc(20% - 2em);
        }
        #btn-go{
            width: 3em;
            text-align: center;
            border-left: none;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
        }
        #btn-go:hover {
            background-color: rgba(255, 255, 255, 0.29);
        }
        #url-ipt{
            border: none;
            background-color: transparent;
            color: inherit;outline: none;
            padding: 0 1.5em;
            width: calc(100% - 3em);
        }
        #history-box{
            list-style: none;
            color: white;
            padding-left: 0;
            margin-top: 6em;
            max-height: 70%;
            overflow: auto;
            padding-right: 2em;
        }
        #history-box li{
            line-height: 40px;
            height: 40px;
        }
        #history-box .text-one-line{
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
            height: 36px;
            line-height: 36px;
            overflow: hidden;
            min-width: 0;
        }
        #history-box .left,#history-box .right{
            height: inherit;
            line-height: inherit;
            color: rgba(255, 255, 255, 0.53);
            transition: all 0.3s;
            cursor: pointer;
        }
        #history-box .left{
            width: calc(90% - 12em);
            float: left;

        }
        #history-box .left:hover {
            text-decoration: underline;
            color: rgba(255, 255, 255, 0.8);
        }
        #history-box .right{
            width: 12em;
            float: right;
            text-align: right;
        }
        #history-box .right:hover {
            color: rgba(255, 255, 255, 0.8);
        }
    </style>
    <title>浏览器</title>
</head>
<body>
<div id="app">
    <div id="url-box">
        <input @keyup.enter="visit()" id="url-ipt" spellcheck="false" autofocus v-model="url" />
    </div>
    <div id="btn-go" @click="visit()"><i class="fa fa-location-arrow fa-fw"></i></div>
    <div class="clear"></div>
    <ul id="history-box">
       <li v-for="item in list">
           <span class="left text-one-line"
                 @click="visit(item.url)"
                 :title="item.url">{{item.url}}</span>
           <span class="right text-one-line">
               {{new Date(item.date).format('MM-dd hh:mm')}}
           </span>
       </li>
    </ul>
</div>
<script>
    var storageName='yluiAppsBrowser';
    function urlFormat(url) {
        url=url.replace(/(^\s*)|(\s*$)/g, "");
        var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/i;
        if(!preg.test(url)){
            url='//'+url;
        }
        return url;
    }

    function jump(url) {
//        url=urlFormat(url);
        if(YLApp.id){
            YLApp.eval('setWinData',{
                url :url,
                urlBar:url
            })
        }else{
            try{
                location.href=url;
            }catch (e){
                alert('不正确的地址')
            }
        }
    }

    var vue=new Vue({
        el:"#app",
        data:{
            url:"",
            list:[],
        },
        created:function () {
            Date.prototype.format = function (fmt) { //author: meizz
                if (!fmt) {
                    fmt = 'yyyy-MM-dd hh:mm:ss';
                }
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            };
            if(localStorage[storageName]){
                this.list=JSON.parse(localStorage[storageName]);
            }
            this.$nextTick(function () {
                $("#history-box").niceScroll({
                    cursorcolor: "#ffffff30",
                    cursorwidth: "4px", // 滚动条的宽度，单位：便素
                    cursorborder: "none", // CSS方式定义滚动条边框
                    grabcursorenabled: false,
                });
            });

        },
        methods:{
            save:function () {
                localStorage[storageName]=JSON.stringify(this.list);
            },
            visit:function (url) {
                url||(url=this.url);
                if(!url) return;
                url= urlFormat(url);
                //查找是否已存在于列表
                if(this.list.length>0){
                    var found=false,foundIndex=null;
                    this.list.forEach(function (t, n) {
                        if(found){return}
                        if(t.url===url){
                            found=true;
                            foundIndex=n;
                        }
                    });
                    if(found){
                        this.list.splice(foundIndex,1)
                    }
                }
                this.list.unshift({
                    url:url,
                    date:Date.now()
                });
                if(this.list.length>50){
                    this.list.pop();
                }
                this.save();
                jump(url);
            }
        }
    });
</script>
</body>
</html>
